<template>
  <div class='container'>
    <el-card>
       <!-- form表单搜索新增 -->
     <el-form :inline="true" class="demo-form-inline">
      <el-form-item label="目录名称">
        <el-input  size="small" v-model="directoryName" ></el-input>
      </el-form-item>
      <el-form-item label="状态" prop="state">
        <el-select v-model="state" placeholder="请选择">
          <el-option label="启用" :value="1"></el-option>
          <el-option label="禁用" :value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button size="small"  @click="onClear">清除</el-button>
      </el-form-item>
      <el-form-item>
        <el-button  size="small"   type="primary" @click="onSelect">查询</el-button>
      </el-form-item>
      <el-form-item style="float: right;">
        <el-button
        class="filter-item fr"
        size="small"
        @click="addDirectorys"
        style="margin-left: 10px;"
        type="success"
        icon="el-icon-edit"
      >新增目录</el-button>
      </el-form-item>
      </el-form>
       <!-- end -->
       <!-- 数据记录 -->
       <el-alert
       v-if="total !== 0"
       :title="'数据一共'+total+'条'"
       type="info"
       class="alert"
       :closable="false"
       show-icon
     ></el-alert>
     <!-- end -->
      <!-- table表格数据 -->
      <el-table
      ref="singleTable"
      :data="tableData"
      style="width: 100%;">
      <el-table-column
        label="序号"
        type="index"
        width="130">
      </el-table-column>
      <el-table-column
        property="subjectName"
        label="所属学科"
        width="220">
      </el-table-column>
      <el-table-column
        property="directoryName"
        label="目录名称"
        width="220">
      </el-table-column>
      <el-table-column
        property="username"
        label="创建者"
        width="220">
      </el-table-column>
      <el-table-column
      property="addDate"
      label="创建日期"
      width="280">
      </el-table-column>
      <el-table-column
        property="totals"
        label="面试题数量"
        width="220">
      </el-table-column>
      <el-table-column
        property="state"
        label="状态"
        width="220">
      </el-table-column>
       <el-table-column
         label="操作">
         <template slot-scope="{row}">
          <!-- 如果状态为已启用，那么按钮就为禁用，否则就为启用 -->
           <el-button type="text" @click="open(row)">{{row.state==='已启用'?'禁用':'启用'}}</el-button>
           <el-button type="text" :disabled="row.disabled" @click="editDirectory(row.id)">修改</el-button>
           <el-button type="text" :disabled="row.disabled" @click="removeDirectory(row.id)">删除</el-button>
         </template>
       </el-table-column>
    </el-table>
      <!-- end -->
       <!-- 分页组件 -->
       <el-pagination
       style="float:right; padding: 20px 0;"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="page"
      :page-sizes="pagesizes"
      :page-size="pagesize"
      layout="prev, pager, next, sizes, jumper"
      :total="total"
      background>
    </el-pagination>
    <Dialog ref="directoryRef" :isEdit="isEdit" :subjectID="subjectID" :getSubjectdirectory="getSubjectdirectory" :getDirectoryList="getDirectoryList" :id="id"></Dialog>
    </el-card>
  </div>
</template>

<script>
import { list as directoryList, remove as directoryRemove, changeState as directoryChangeState } from '@/api/hmmm/directorys'
import Dialog from '../components/directorys-add.vue'
export default {
  components: {
    Dialog
  },
  data () {
    return {
      isShow: false, // 学科传递过来的标识
      directoryName: '', // 目录名称
      state: '', // 状态
      total: 0, // 总条数
      tableData: [], // 列表数据
      pagesize: 10, // 当前每页显示多少条
      pagesizes: [5, 10, 20, 50], // 每页显示多少条
      page: 1, // 当前页
      isEdit: false, // 是否编辑操作
      id: 5,
      subjectID: '' // 路由跳转传过来的学科ID
      // disabled: false // 按钮的禁用状态
    }
  },
  // 监听器
  watch: {
    // 监听路由变化
    $route: {
      handler: function (val, oldVal) {
        // console.log(val, oldVal)
        if (val.name === 'subjects-directorys') {
          // 获取目录列表
          this.getDirectoryList()
        }
      },
      // 深度观察监听
      deep: true
    }
  },
  created () {
    this.isShow = this.$route.query.isShow
    // 接收学科跳转传过来的值，如果有值，就调用接口发送请求的时候将值传进去
    if (this.isShow) {
      // console.log(this.$route.query.subjectInfo)
      this.getSubjectdirectory(this.$route.query.subjectInfo.id)
      // 将学科ID存储在data中
      this.subjectID = this.$route.query.subjectInfo.id
      // 将标识置为false
      this.isShow = false
    } else {
      // 获取目录列表
      this.getDirectoryList()
    }
  },
  methods: {
    // 学科页面跳转渲染目录列表
    async getSubjectdirectory (subjectID) {
      // 发送请求，获取目录列表
      const { data } = await directoryList({ subjectID: subjectID, directoryName: this.directoryName, page: this.page, pagesize: this.pagesize })
      console.log(data)
      // 将后端返回的数据列表传给tableData
      this.tableData = data.items
      // 将后端返回的数据中的state 1 替换为启用 0 替换为禁用
      this.tableData.forEach(item => {
        item.state ? item.disabled = true : item.disabled = false
        // 如果状态为1  状态为已启用
        item.state ? item.state = '已启用' : item.state = '已禁用'
        // 对服务器返回的时间进行加工处理
        item.addDate = item.addDate.slice(0, -5).slice(0, 10) + item.addDate.slice(0, -5).slice(11, 20)
      })
      // 将总数量赋值给当前的total
      this.total = data.counts
    },
    // 每页显示条数变化时触发
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
      // 当前页码为1
      this.page = 1
      // 当前每页显示val条
      this.pagesize = val
      // 发送数据，获取数据列表
      this.getDirectoryList()
    },
    // 当前页变化时触发
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`)
      this.page = val
      // 发送数据，获取数据列表
      this.getDirectoryList()
    },
    // 清除按钮
    onClear () {
      // 清空搜索框
      this.directoryName = ''
      // 清空状态选择框
      this.state = ''
    },
    // 查询按钮
    async onSelect () {
      // 如果state的状态不为1也不为0，直接请求所有状态的列表
      if (this.state !== 1 && this.state !== 0) {
        // 发送请求，获取数据
        this.getDirectoryList()
      } else {
        // 请求状态为1或状态为0的列表
        // 如果有传过来的ID
        if (this.subjectID) {
          // 发送请求，获取目录列表
          const { data } = await directoryList({ subjectID: this.subjectID, directoryName: this.directoryName, state: this.state, page: this.page, pagesize: this.pagesize })
          // 将后端返回的数据列表传给tableData
          this.tableData = data.items
          // 将后端返回的数据中的state 1 替换为启用 0 替换为禁用
          this.tableData.forEach(item => {
          // 如果state为1  将state置为‘已启用’，否则置为‘已禁用’
            item.state ? item.state = '已启用' : item.state = '已禁用'
            // 对服务器返回的时间进行加工处理
            item.addDate = item.addDate.slice(0, -5).slice(0, 10) + item.addDate.slice(0, -5).slice(11, 20)
          })
          // 将总数量赋值给当前的total
          this.total = data.counts
        } else {
          // console.log('111111asdasbdbsabdasdsa')
          const { data } = await directoryList({ directoryName: this.directoryName, state: this.state, page: this.page, pagesize: this.pagesize })
          // 将后端返回的数据列表传给tableData
          this.tableData = data.items
          // 将后端返回的数据中的state 1 替换为启用 0 替换为禁用
          this.tableData.forEach(item => {
          // 如果state为1  将state置为‘已启用’，否则置为‘已禁用’
            item.state ? item.state = '已启用' : item.state = '已禁用'
            // 对服务器返回的时间进行加工处理
            item.addDate = item.addDate.slice(0, -5).slice(0, 10) + item.addDate.slice(0, -5).slice(11, 20)
          })
          // 将总数量赋值给当前的total
          this.total = data.counts
        }
      }
    },
    // 新增目录
    addDirectorys () {
      // 是否编辑置位false
      this.isEdit = false
      // 调用子组件方法显示弹层
      this.$refs.directoryRef.dialogFormV()
    },
    // 启用按钮
    async open (row) {
      // console.log(row.id, row.state)
      // 如果状态为已启用，那么给当前的state置为0，否则置为1
      row.state === '已启用' ? row.state = 0 : row.state = 1
      // 发送请求，修改状态
      const { data } = await directoryChangeState({ id: row.id, state: row.state })
      console.log(data)
      if (data.success) this.$message.success('操作成功')
      row.state ? row.state = '已启用' : row.state = '已禁用'
      row.state === '已启用' ? row.disabled = true : row.disabled = false
      // 重新渲染页面
      // { this.getDirectoryList() }
    },
    // 修改
    editDirectory (id) {
      // 是否编辑置为true
      this.isEdit = true
      this.id = id
      // 调用子组件方法显示弹层
      this.$refs.directoryRef.dialogFormV()
      // 调用子组件方法回显数据
      this.$refs.directoryRef.getDirectoryDetail(id)
    },
    // 删除
    removeDirectory (id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const { data } = await directoryRemove({ id })
        // console.log(data)
        if (data.success) this.$message.success('删除成功')
        // 重新渲染列表
        this.getDirectoryList()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 获取目录列表
    async getDirectoryList () {
      // 发送请求，获取目录列表
      const { data } = await directoryList({ directoryName: this.directoryName, page: this.page, pagesize: this.pagesize })
      console.log(data)
      // 将后端返回的数据列表传给tableData
      this.tableData = data.items
      // 将后端返回的数据中的state 1 替换为启用 0 替换为禁用
      this.tableData.forEach(item => {
        item.state ? item.disabled = true : item.disabled = false
        item.state ? item.state = '已启用' : item.state = '已禁用'
        item.addDate = item.addDate.slice(0, -5).slice(0, 10) + item.addDate.slice(0, -5).slice(11, 20)
      })
      // 将总数量赋值给当前的total
      this.total = data.counts
    }
  }
}
</script>

<style scoped lang='scss'>
.alert {
  margin: 10px 0px;
}</style>
